<template>
	<view>
		<!-- {{titles}} -->
		<view class="tabs">
			<template v-for="(item,i) in titles" :key="i">
				<view class="item" @click="itemclick(i)">
					<text :class="[currentIndex==i?'active':'title']">{{item}}</text>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";
defineProps({
	titles:{
		type:Array,
		default:()=>[]
	}
})
const emit=defineEmits(['tabIndex'])
const currentIndex =ref(0)
function itemclick(i){
	currentIndex.value=i
	emit('tabIndex',i)
}
</script>

<style lang="scss">
.tabs{
	@include normalFlex();
	//辅助调样式的
	// border: 1px solid greenyellow;
	.item{
		flex: 1;
		text-align: center;
		.title{
			// 改为行内块 可撑开父元素
			display: inline-block;
			// border: 1px solid green;
		    padding: 20rpx;
			border-bottom: 2rpx solid #fff;
		}
		.active{
			display: inline-block;
			padding: 20rpx;
			border-bottom: 2rpx solid $gPrimaryColor;
		}
	}
}
</style>